<template>
  <div id="docsIndex">
    <el-row>
      <!-- 表格查询条件 -->
      <el-col :span="24">
        <el-form :inline="true" ref="stationForm" :model="queryForm">
          <el-form-item>
            <el-input v-model="queryForm.title" placeholder="文章名称/描述.."></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.tags" placeholder="文章标签"></el-input>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="gptVipType"
                      placeholder="访问会员类型"
                      v-model="queryForm.gptVipTypeCode"/>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="isOrNot"
                      placeholder="是否置顶"
                      v-model="queryForm.isTop"/>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="isOrNot"
                      placeholder="是否编辑精选"
                      v-model="queryForm.isEditHot"/>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="isOrNot"
                      placeholder="是否免费账号可访问"
                      v-model="queryForm.isFree"/>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="isOrNot"
                      placeholder="是否平台可直接使用"
                      v-model="queryForm.isPlatformCanUse"/>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="docType"
                      placeholder="文档类型"
                      v-model="queryForm.docTypeCode"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getTableDatas()">查询</el-button>
            <el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <!-- 数据表格 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <el-button type="primary" icon="el-icon-plus" @click="dialog.saveOrEditDiv=true">新增文章</el-button>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeletes">
              <el-button slot="reference" type="danger" icon="el-icon-delete">批量删除文章</el-button>
            </el-popconfirm>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%" @selection-change="tableDataSelected">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="title" label="文章名称"></el-table-column>
              <el-table-column prop="tags" label="标签"></el-table-column>
              <el-table-column prop="docTypeName" label="文章类型"></el-table-column>
              <el-table-column prop="gptVipTypeName" label="访问会员类型(及其以上均可)">
                <template slot-scope="scope">
                  <el-tag :type="getTagType(scope.row.gptVipTypeCode)">{{ scope.row.gptVipTypeName }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="isTop" label="是否置顶">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.isTop==1" type="success">置顶</el-tag>
                  <el-tag v-else type="danger">否</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="isEditHot" label="是否编辑精选">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.isEditHot==1" type="success">是</el-tag>
                  <el-tag v-else type="danger">否</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="isFree" label="是否免费">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.isFree==1" type="success">免费</el-tag>
                  <el-tag v-else type="danger">会员专享</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="isPlatformCanUse" label="平台是否可使用">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.isPlatformCanUse==1" type="success">是</el-tag>
                  <el-tag v-else type="danger">否</el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="180">
                <template slot-scope="scope">
                  <el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle
                             title="查看"></el-button>
                  <el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle
                             title="编辑"></el-button>
                  <el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle
                             title="删除"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="tableSizeChange"
              @current-change="tableCurrentChange"
              :current-page="pageData.page"
              :page-sizes="[10, 20, 40, 100]"
              :page-size="pageData.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageData.total"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 新增\修改用户信息弹窗 -->
    <el-dialog
      :title="(dialog.isEdit == true ? '编辑' : '新增') + '文章'"
      :visible.sync="dialog.saveOrEditDiv"
      :close-on-click-modal="false"
      :show-close="false"
      width="70%"
      :destroy-on-close="true"
    ><el-tabs v-model="addOrEditNowSelect">
      <el-tab-pane name="1" label="1.文章信息"></el-tab-pane>
      <el-tab-pane name="2" label="2.文章内容"></el-tab-pane>
      <el-tab-pane name="3" label="3.文章配图"></el-tab-pane>
      <el-tab-pane name="4" label="4.文章附件"></el-tab-pane>
    </el-tabs>
      <!-- 1.文章信息 -->
      <el-form v-show="addOrEditNowSelect==1"
        ref="saveOrEditDataForm"
        :rules="saveOrEditDataFormRules"
        :model="saveOrEditData.docs"
        label-width="130px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="文章名称" prop="title">
              <el-input
                v-model="saveOrEditData.docs.title"
                placeholder="请填写文章名称"
                maxlength="80"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可访问会员等级" prop="gptVipTypeCode">
              <gd_param type="select"
                        paramCode="gptVipType"
                        placeholder="请选择可访问会员等级"
                        @selectChange="gptVipTypeChange"
                        v-model="saveOrEditData.docs.gptVipTypeCode"/>
            </el-form-item>

          </el-col>
        </el-row>
        <el-form-item label="文章描述" prop="subDesc">
          <el-input
            type="textarea"
            placeholder="如有备注请输入描述"
            v-model="saveOrEditData.docs.subDesc"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文章标签" prop="tags">
              <el-input
                v-model="saveOrEditData.docs.tags"
                placeholder="请填写文章标签，用英文逗号分割，建议最多两个"
                maxlength="80"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="外部入口地址" prop="webUrl">
              <el-input
                v-model="saveOrEditData.docs.webUrl"
                placeholder="请填写入口地址网址"
                maxlength="100"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否置顶" prop="isTop">
              <el-switch
                v-model="saveOrEditData.docs.isTop"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否编辑精选" prop="isEditHot">
              <el-switch
                v-model="saveOrEditData.docs.isEditHot"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否免费访问" prop="isFree">
              <el-switch
                v-model="saveOrEditData.docs.isFree"
                active-value="1"
                inactive-value="0"
                @change="isFreeChange">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="平台是否直接可用" prop="isPlatformCanUse">
              <el-switch
                v-model="saveOrEditData.docs.isPlatformCanUse"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文章类型" prop="docTypeCode">
              <gd_param type="select"
                        paramCode="docType"
                        placeholder="请选择文章类型"
                        @selectChange="docTypeChange"
                        v-model="saveOrEditData.docs.docTypeCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文章主图" prop="mainFileID">
              <gd_file v-if="dialog.isEdit == false" @uploadSuccess="docsMainFileUploadSuccess" />
              <gd_file
                v-else
                :fileID="saveOrEditData.docs.mainFileID"
                @uploadSuccess="docsMainFileUploadSuccess"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="comment">
          <el-input
            type="textarea"
            placeholder="如有备注请输入描述"
            v-model="saveOrEditData.docs.comment"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 2.文章内容 -->
      <el-row v-show="addOrEditNowSelect==2">
        <gd_wordeditor :value="saveOrEditData.docs.docMain" @change="docMainChange"/>
      </el-row >
      <!-- 3.文章配图 -->
      <el-row v-show="addOrEditNowSelect==3">
        <el-upload
          :action="uploadFilePath"
          :show-file-list="false"
          :on-success="docsPcUploadSuccess"
          :before-upload="beforeUpload">
          <el-button type="primary">添加配图</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
        <el-table height="420" :data="saveOrEditData.pcs" style="width: 100%">
          <el-table-column prop="fileUrl" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 120px; height: 100px"
                :src="scope.row.fileUrl"
                :preview-src-list="[scope.row.fileUrl]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="80">
            <template slot-scope="scope">
              <el-button @click="rowPcDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle
                         title="删除"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 4.文章附件 -->
      <el-row v-show="addOrEditNowSelect==4">
        <el-upload
          :action="uploadFilePath2"
          :show-file-list="false"
          :on-success="docsFileUploadSuccess"
          :before-upload="beforeUpload2">
          <el-button type="primary">添加附件</el-button>
          <div slot="tip" class="el-upload__tip">上传文件不可超过1GB</div>
        </el-upload>
        <el-table height="420" :data="saveOrEditData.files" style="width: 100%">
          <el-table-column prop="fileName" label="文件名称">
            <template slot-scope="scope">
              <a :href="scope.row.fileUrl">{{ scope.row.fileName }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="文件大小"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="80">
            <template slot-scope="scope">
              <el-button @click="rowFileDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle
                         title="删除"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 按钮组 -->
        <div style="margin-top: 10px">
          <el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">确定</el-button>
          <el-button
            @click="
							dialog.saveOrEditDiv = false;
              dialog.isEdit = false;
							resetAddOrEditOrShowForm();
						"
          >
            取消
          </el-button>
        </div>

    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog
      title="文章详情"
      :visible.sync="dialog.showDiv"
      width="85%"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="addOrEditNowSelect">
        <el-tab-pane name="1" label="1.文章信息"></el-tab-pane>
        <el-tab-pane name="2" label="2.文章详情"></el-tab-pane>
      </el-tabs>
      <el-row v-show="addOrEditNowSelect==1">
        <el-col :span="10">
          <el-carousel height="230px">
            <el-carousel-item v-for="item in showData.pcs" :key="item.fileID">
              <el-image
                style="width: 100%;height: 100%"
                :src="item.fileUrl"
                fit="contain"
                :preview-src-list="[item.fileUrl]">
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="14">
          <el-descriptions border :title="showData.docs.title" class="margin-top" :column="3">
            <el-descriptions-item label="标签">{{ showData.docs.tags }}</el-descriptions-item>
            <el-descriptions-item label="可看会员等级">{{ showData.docs.gptVipTypeName }}</el-descriptions-item>
            <el-descriptions-item label="是否置顶">
              <el-tag v-if="showData.docs.isTop==1" type="success">已置顶</el-tag>
              <el-tag v-else type="danger">否</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否编辑精选">
              <el-tag v-if="showData.docs.isEditHot==1" type="success">是</el-tag>
              <el-tag v-else type="danger">否</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否免费">
              <el-tag v-if="showData.docs.isFree==1" type="success">免费</el-tag>
              <el-tag v-else type="danger">会员专享</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="平台是否可用">
              <el-tag v-if="showData.docs.isPlatformCanUse==1" type="success">已集成</el-tag>
              <el-tag v-else type="danger">否</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="外部地址" span="4">{{ showData.docs.webUrl }}</el-descriptions-item>
            <el-descriptions-item label="备注" span="4">{{ showData.docs.comment }}</el-descriptions-item>
          </el-descriptions>
        </el-col>

        <el-table height="150" :data="showData.files" style="width: 100%">
          <el-table-column prop="fileName" label="文件名称">
            <template slot-scope="scope">
              <a :href="scope.row.fileUrl">{{ scope.row.fileName }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="文件大小"></el-table-column>
        </el-table>
      </el-row>
      <el-row v-show="addOrEditNowSelect==2" v-html="showData.docs.docMain"></el-row>
      <el-button
        @click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
      >
        关闭
      </el-button>
    </el-dialog>


  </div>
</template>

<script>
import * as axiosAPI from '@/api/gpt/docs.js';
import {apipath} from '@/util/apimain.js';
import gd_param from "@/components/mycomponents/gd_param.vue";
import gd_file from "@/components/mycomponents/gd_file.vue";
import gd_wordeditor from '@/components/mycomponents/gd_wordeditor';
export default {
  name: 'docsIndex',
  components: {gd_file, gd_param,gd_wordeditor},
  data() {
    return {
      wangEditor:null,
      uploadFilePath:apipath+'/gdones.server/file/uploadOneImage',
      uploadFilePath2:apipath+'/gdones.server/file/uploadOneFile',
      addOrEditNowSelect:"1",
      //查询表单数据
      queryForm: {
        title: null,
        tags: null,
        isTop: null,
        isEditHot: null,
        isFree: null,
        isPlatformCanUse: null
      },
      //表格数据
      tableData: [],
      //主表-分页数据
      pageData: {
        page: 1,
        size: 10,
        total: 0
      },
      //当前表格复选数据
      nowTableSelected: [],
      //弹窗状态
      dialog: {
        isEdit: false,
        saveOrEditDiv: false,
        showDiv: false
      },
      //添加编辑表单-检验
      saveOrEditDataFormRules: {
        title: {required: true, message: '请输入文章名称', trigger: 'blur'},
        subDesc: {required: true, message: '请输入文章描述', trigger: 'blur'},
        tags: {required: true, message: '请输入文章标签', trigger: 'blur'},
        docMain: {required: true, message: '请输入文章内容', trigger: 'blur'},
        gptVipTypeCode: {required: true, message: '请选择会员类型', trigger: 'change'},
        mainFileID: {required: true, message: '请选择文章主图', trigger: 'change'},
        docTypeCode: {required: true, message: '请选择文章类型', trigger: 'change'}
      },
      saveOrEditData: {
        docs: {
          docID: null,
          comment: null,
          title: null,
          subDesc: null,
          tags: null,
          docMain: null,
          gptVipTypeCode: null,
          gptVipTypeName: null,
          isTop: "0",
          isEditHot: "0",
          isFree: "0",
          webUrl: null,
          isPlatformCanUse: "0",
          mainFileID:null,
          mainFileUrl:null,
          docTypeCode:null,
          docTypeName:null
        },
        files: [],
        pcs: []
      },
      //展示表单数据
      showData: {
        docs: {
          docID: null,
          comment: null,
          title: null,
          subDesc: null,
          tags: null,
          docMain: null,
          gptVipTypeCode: null,
          gptVipTypeName: null,
          isTop: "0",
          isEditHot: "0",
          isFree: "0",
          webUrl: null,
          isPlatformCanUse: "0",
          mainFileID:null,
          mainFileUrl:null,
          docTypeCode:null,
          docTypeName:null
        },
        files: [],
        pcs: []
      },
      //表单加载值
      formLoading: false
    };
  },
  mounted() {
    this.getTableDatas();
  },
  filters: {
    timeFormat: function (value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1 + '';
      let day = date.getDate() + '';
      let hour = date.getHours() + '';
      let minute = date.getMinutes() + '';
      let second = date.getSeconds() + '';
      return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
    }
  },
  computed: {
    getTagType() {
      return (data) => {
        if (data == "1") {
          return "info";
        } else if (data == "2") {
          return "success";
        } else if (data == "3") {
          return "warning";
        } else if (data == "4") {
          return "danger";
        } else {
          return "ppp";
        }
      }
    }
  },
  methods: {

    //查询表格数据
    getTableDatas() {
      let _this = this;
      axiosAPI.pages(_this.queryForm, _this.pageData)
        .then(function (response) {
          console.log(response);
          if (response.code == '0000') {
            _this.tableData = response.data.rows;
            _this.pageData.total = response.data.total;
          }
        });
    },
    //重置查询条件表单
    resetQueryForm() {
      this.queryForm = {
        title: null,
        tags: null,
        isTop: null,
        isEditHot: null,
        isFree: null,
        isPlatformCanUse: null
      };
      this.getTableDatas();
    },
    //重置添加、编辑、展示表单
    resetAddOrEditOrShowForm() {
      this.showData = {
        docs: {
          docID: null,
          comment: null,
          title: null,
          subDesc: null,
          tags: null,
          docMain: null,
          gptVipTypeCode: null,
          gptVipTypeName: null,
          isTop: "0",
          isEditHot: "0",
          isFree: "0",
          webUrl: null,
          isPlatformCanUse: "0",
          mainFileID:null,
          mainFileUrl:null,
          docTypeCode:null,
          docTypeName:null
        },
        files: [],
        pcs: []
      };
      this.saveOrEditData = {
        docs: {
          docID: null,
          comment: null,
          title: null,
          subDesc: null,
          tags: null,
          docMain: null,
          gptVipTypeCode: null,
          gptVipTypeName: null,
          isTop: "0",
          isEditHot: "0",
          isFree: "0",
          webUrl: null,
          isPlatformCanUse: "0",
          mainFileID:null,
          mainFileUrl:null,
          docTypeCode:null,
          docTypeName:null
        },
        files: [],
        pcs: []
      }
    },
    //提交-添加、编辑表单
    submitSaveOrEdit() {
      let _this = this;
      this.$refs.saveOrEditDataForm.validate(valid => {
        if (valid) {
          this.formLoading = true;
          let _this = this;
          if (_this.dialog.isEdit == true) {// 编辑

            axiosAPI.update(_this.saveOrEditData)
              .then(function (res) {
                if (res.code == '0000') {
                  _this.dialog.saveOrEditDiv = false;
                  _this.dialog.isEdit = false;
                  _this.resetAddOrEditOrShowForm();
                  _this.formLoading = false;
                  _this.getTableDatas();
                } else {
                  _this.formLoading = false;
                }
              });

          } else { // 添加
            axiosAPI.add(_this.saveOrEditData)
              .then(function (res) {
                if (res.code == '0000') {
                  _this.dialog.saveOrEditDiv = false;
                  _this.dialog.isEdit = false;
                  _this.resetAddOrEditOrShowForm();
                  _this.formLoading = false;
                  _this.getTableDatas();
                } else {
                  _this.formLoading = false;
                }
              });
          }
        }
      });
    },
    //提交-删除
    submitDelete(ids) {
      let _this = this;
      axiosAPI.deletes(ids)
        .then(res => {
          if (res.code == '0000') {
            _this.getTableDatas();
          }
        });
    },
    //分页条目数切换
    tableSizeChange(size) {
      this.pageData.size = size;
      this.getTableDatas();
    },
    //页码切换
    tableCurrentChange(page) {
      this.pageData.page = page;
      this.getTableDatas();
    },
    //行-查看
    rowShow(data) {
      var _this = this;
      axiosAPI.getByID(data.docID)
        .then(function (res) {
          if (res.code == "0000") {
            _this.showData = res.data;
            var temp = {
              fileID:_this.showData.docs.mainFileID,
              fileUrl:_this.showData.docs.mainFileUrl
            }
            _this.showData.pcs.push(temp);
            _this.dialog.showDiv = true;
          }
        });
    },
    //行-编辑
    rowEdit(data) {

      let _this = this;
      axiosAPI.getByID(data.docID)
        .then(function (res) {
          if (res.code == "0000") {
            _this.saveOrEditData = res.data;
            _this.dialog.isEdit = true;
            _this.dialog.saveOrEditDiv = true;
          }
        });
    },
    //行-删除
    rowDelete(data) {
      this.$confirm('确定要删除这行数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDelete(data.docID);
      });
    },
    //点击批量删除
    moreDeletes() {
      if (this.nowTableSelected.length <= 0) {
        this.$notify.warning({
          title: '删除提示',
          message: '请至少选择一条数据再删除'
        });
        return;
      }
      let ids = '';

      for (var i in this.nowTableSelected) {
        ids += this.nowTableSelected[i].docID + ',';
      }

      ids = ids.substring(0, ids.length - 1);

      //调用删除
      this.submitDelete(ids);
    },
    //表格批量选择
    tableDataSelected(data) {
      this.nowTableSelected = data;
    },
    // 会员类型选择
    gptVipTypeChange(data) {
      if (data == undefined) {
        this.saveOrEditData.docs.gptVipTypeCode = null;
        this.saveOrEditData.docs.gptVipTypeName = null;
      } else {
        this.saveOrEditData.docs.gptVipTypeCode = data.dataValue;
        this.saveOrEditData.docs.gptVipTypeName = data.dataName;
      }
    },
    // isFree 切换事件
    isFreeChange(data) {
      if (data == 1) {
        this.saveOrEditData.docs.gptVipTypeCode = "1";
        this.saveOrEditData.docs.gptVipTypeName = "AI体验版-1";
      }
    },
    // 文章图片上传成功回调
    docsPcUploadSuccess(data) {
      if(data!=null){
        var temp = {
          fileID:data.id,
          fileUrl:data.url
        }
        this.saveOrEditData.pcs.push(temp);
      }
    },
    // 文章附件上传成功回调
    docsFileUploadSuccess(data) {
      if(data!=null){
        var temp = {
          fileID:data.id,
          fileUrl:data.url,
          fileName:data.originalFilename,
          fileSize:this.checkFileUnit(data.size)
        }
        this.saveOrEditData.files.push(temp);
      }
    },
    // 计算文件单位
    checkFileUnit(size){
      var mbsize = size / 1024;
      if(mbsize<=999){
        mbsize = mbsize.toFixed(2);
        return mbsize + "KB";
      }else{
        mbsize = mbsize / 1024;
        mbsize = mbsize.toFixed(2);
        return mbsize + "MB";
      }

    },
    // 文章主图上传成功
    docsMainFileUploadSuccess(data){
      if (data.length > 0) {
        this.saveOrEditData.docs.mainFileID = data[0].id;
        this.saveOrEditData.docs.mainFileUrl = data[0].url;
      } else {
        this.saveOrEditData.docs.mainFileID = null;
        this.saveOrEditData.docs.mainFileUrl = null;
      }
    },
    // 文章类型切换
    docTypeChange(data){
      if (data == undefined) {
        this.saveOrEditData.docs.docTypeCode = null;
        this.saveOrEditData.docs.docTypeName = null;
      } else {
        this.saveOrEditData.docs.docTypeCode = data.dataValue;
        this.saveOrEditData.docs.docTypeName = data.dataName;
      }
    },
    // 文章内容输入切换
    docMainChange(data){
      this.saveOrEditData.docs.docMain = data;
    },
    // 配图删除
    rowPcDelete(data){
      var delIndex = 0;
      for(var i in this.saveOrEditData.pcs){
        if(this.saveOrEditData.pcs[i].fileID == data.fileID){
          delIndex = i;
          break;
        }
      }
      this.saveOrEditData.pcs.splice(delIndex,1);
    },
    // 附件删除
    rowFileDelete(data){
      var delIndex = 0;
      for(var i in this.saveOrEditData.files){
        if(this.saveOrEditData.files[i].fileID == data.fileID){
          delIndex = i;
          break;
        }
      }
      this.saveOrEditData.files.splice(delIndex,1);
    },
    //文件上传之前
    beforeUpload(file) {

        let type = file.name.substring(file.name.lastIndexOf(".") + 1);
        const types = ["jpeg", "jpg", "png","gif"];
        if (types.indexOf(type) === -1) {
          this.$message.error("图片只能上传jpeg/jpg/png/gif格式！");
          return false;
        }

      if (file.size > 10 * 1000 * 1024) {
        this.$message.error("文件大小不能超过" + 10 + "MB");
        return false;
      }
    },
    // 附件上传前
    beforeUpload2(file){
      if (file.size > 1024 * 1000 * 1024) {
        this.$message.error("文件大小不能超过" + 1024 + "MB");
        return false;
      }
    }
  }
};
</script>

<style scoped></style>
